<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学员介绍</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!--  -->
    <div class="w-full flex flex-col items-center">
        <!--  导航菜单 -->
        <header class="flex flex-row gap-4 py-2">
            <div>
                <!-- logo -->
                <img src="/images/logo.png">
            </div>
            <nav class="flex-1">
                <ul
                    class="flex flex-row justify-center font-bold [&>li]:h-[65px] [&>li]:p-4 [&>li]:hover:text-[#d9eb60] [&>li]:cursor-pointer gap-4">
                    <li>
                        <a href="./index.html">首页</a>
                    </li>
                    <li>
                        <a href="#">导师阵容</a>
                    </li>
                    <li>
                        <a href="./ranking.html">排名展示</a>
                    </li>
                    <li>
                        <a href="#">动态加权池</a>
                    </li>
                    <li>
                        <a href="#">授业解惑</a>
                    </li>
                    <li>
                        <a href="#">互动中心</a>
                    </li>
                    <li>
                        <a href="./student.html">学员介绍</a>
                    </li>
                    <li>
                        <a href="./news.html">新闻资讯</a>
                    </li>
                    <li>
                        <a href="#">关于我们</a>
                    </li>
                </ul>
            </nav>
        </header>


        <div class="w-full flex flex-col items-center bg-white text-black">

            <div class="w-[1200px] flex flex-col gap-8 mb-10">
                <header class="flex flex-col justify-center items-center py-8 relative">
                    <div class="bg-[#d9eb60] w-[100px] h-5 absolute top-13 rounded-2xl -z-1"></div>
                    <span
                        class="text-4xl font-bold bg-size-[auto_10px] bg-linear-to-r from-[#FFF] from-0% via-35% via-[#d9eb60] to-95% to-[#FFF]">选手故事墙</span>
                    <div class="w-15 h-1.5 my-4 bg-[#d9eb60]"></div>
                </header>
                <div class="w-full border border-[#cfd4da] rounded-2xl shadow-md p-6 grid grid-cols-12 gap-8">
                    <div class="h-80 col-span-7 border border-gray-100 bg-[#676767]/80">
                        视频区域
                    </div>
                    <div class="col-span-5 flex flex-col gap-4">
                        <div class="flex flex-row gap-4 items-center">
                            <div>
                                <img src="./images/index/sm_xx_1.png" alt="">
                            </div>
                            <span
                                class="text-xl font-bold  bg-linear-to-t from-[#d9eb60] from-0% via-25% to-30% to-[#FFF]">48岁宝妈用“菜钱”实现了财务自由</span>
                        </div>
                        <span class="text-lg">
                            《阿尔法之路:顶尖交易员持仓透视》
                        </span>
                        <span class="text-lg">
                            -章维军战队学员
                        </span>
                        <span class="text-ba'sebase text-[#8e8e8e] py-4">
                            从家庭主妇到交易百强，这位48岁的宝妈用独特的“菜钱翻倍技法”在金融市场中脱颖而出。她将日常生活中的精打细算转化为交易策略，实现了从零到百万的财富积累，从第323名跃升至82名，成为大赛最大的黑马之一。
                        </span>
                    </div>
                </div>

                <div class="w-full border border-[#cfd4da] rounded-2xl shadow-md p-6 grid grid-cols-12 gap-8">
                    <div class="h-80 col-span-7 border border-gray-100 bg-[#676767]/80">
                        视频区域
                    </div>
                    <div class="col-span-5 flex flex-col gap-4">
                        <div class="flex flex-row gap-4 items-center">
                            <div>
                                <img src="./images/index/sm_xx_1.png" alt="">
                            </div>
                            <span
                                class="text-xl font-bold  bg-linear-to-t from-[#d9eb60] from-0% via-25% to-30% to-[#FFF]">48岁宝妈用“菜钱”实现了财务自由</span>
                        </div>
                        <span class="text-lg">
                            《阿尔法之路:顶尖交易员持仓透视》
                        </span>
                        <span class="text-lg">
                            -章维军战队学员
                        </span>
                        <span class="text-ba'sebase text-[#8e8e8e] py-4">
                            从家庭主妇到交易百强，这位48岁的宝妈用独特的“菜钱翻倍技法”在金融市场中脱颖而出。她将日常生活中的精打细算转化为交易策略，实现了从零到百万的财富积累，从第323名跃升至82名，成为大赛最大的黑马之一。
                        </span>
                    </div>
                </div>

            </div>

            <div class="w-[1200px] flex flex-col gap-8 mb-10">
                <header class="flex flex-col justify-center items-center py-8 relative">
                    <div class="bg-[#d9eb60] w-[100px] h-5 absolute top-13 rounded-2xl -z-1"></div>
                    <span
                        class="text-4xl font-bold bg-size-[auto_10px] bg-linear-to-r from-[#FFF] from-0% via-35% via-[#d9eb60] to-95% to-[#FFF]">优秀学员展示</span>
                    <div class="w-15 h-1.5 my-4 bg-[#d9eb60]"></div>
                </header>
                <div class="w-[1200px] grid grid-cols-2 gap-8">
                    <div class="rounded-md border border-[#d9eb60] p-6">
                        <header class="flex flex-row items-center justify-between">
                            <div class="flex flex-row items-center gap-4">
                                <img src="/images/index/sm_wg_1.png" alt="">
                                <h3 class="text-xl font-bold">
                                    重量级排行榜
                                </h3>
                            </div>
                            <div class="text-sm bg-[#d9eb60] text-white px-2 py-1.5 rounded-full">
                                账户净值>10,000美元
                            </div>
                        </header>
                        <table
                            class="w-full text-[#5d5d5d] [&_tr]:border-[#cfd4da] [&_tr:not(:last-child)]:border-b [&_thead_tr]:border-b-2 [&_th]:text-left [&_th]:py-4 [&_th]:px-4 [&_td]:py-4 [&_td]:px-4">
                            <thead>
                                <tr>
                                    <th>排名</th>
                                    <th>昵称</th>
                                    <th>账号</th>
                                    <th>盈利金额</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <span
                                            class="w-5 h-5 block text-center bg-[#eab309] text-white rounded-2xl">1</span>
                                    </td>
                                    <td>张三</td>
                                    <td>1234567890</td>
                                    <td>
                                        <span class="text-[#06943f] font-bold">482890</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span
                                            class="w-5 h-5 block text-center bg-[#cfd4da] text-white rounded-2xl">2</span>
                                    </td>
                                    <td>张三</td>
                                    <td>1234567890</td>
                                    <td>
                                        <span class="text-[#06943f] font-bold">482890</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span
                                            class="w-5 h-5 block text-center bg-[#db7701] text-white rounded-2xl">3</span>
                                    </td>
                                    <td>张三</td>
                                    <td>1234567890</td>
                                    <td>
                                        <span class="text-[#06943f] font-bold">482890</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="w-5 h-5 block text-center">4</span>
                                    </td>
                                    <td>张三</td>
                                    <td>1234567890</td>
                                    <td>
                                        <span class="text-[#06943f] font-bold">482890</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="w-5 h-5 block text-center">5</span>
                                    </td>
                                    <td>张三</td>
                                    <td>1234567890</td>
                                    <td>
                                        <span class="text-[#06943f] font-bold">482890</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="rounded-md border border-[#eab40d] p-6">
                        <header class="flex flex-row items-center justify-between">
                            <div class="flex flex-row items-center gap-4">
                                <img src="/images/index/sm_wg_1.png" alt="">
                                <h3 class="text-xl font-bold">
                                    轻量级排行榜
                                </h3>
                            </div>
                            <div class="text-sm bg-[#dfb27a] text-white px-2 py-1.5 rounded-full">
                                账户净值>10,000美元
                            </div>
                        </header>
                        <table
                            class="w-full text-[#5d5d5d] [&_tr]:border-[#cfd4da] [&_tr:not(:last-child)]:border-b [&_thead_tr]:border-b-2 [&_th]:text-left [&_th]:py-4 [&_th]:px-4 [&_td]:py-4 [&_td]:px-4">
                            <thead>
                                <tr>
                                    <th>排名</th>
                                    <th>昵称</th>
                                    <th>账号</th>
                                    <th>盈利金额</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <span
                                            class="w-5 h-5 block text-center bg-[#eab309] text-white rounded-2xl">1</span>
                                    </td>
                                    <td>张三</td>
                                    <td>1234567890</td>
                                    <td>
                                        <span class="text-[#06943f] font-bold">482890</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span
                                            class="w-5 h-5 block text-center bg-[#cfd4da] text-white rounded-2xl">2</span>
                                    </td>
                                    <td>张三</td>
                                    <td>1234567890</td>
                                    <td>
                                        <span class="text-[#06943f] font-bold">482890</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span
                                            class="w-5 h-5 block text-center bg-[#db7701] text-white rounded-2xl">3</span>
                                    </td>
                                    <td>张三</td>
                                    <td>1234567890</td>
                                    <td>
                                        <span class="text-[#06943f] font-bold">482890</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="w-5 h-5 block text-center">4</span>
                                    </td>
                                    <td>张三</td>
                                    <td>1234567890</td>
                                    <td>
                                        <span class="text-[#06943f] font-bold">482890</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="w-5 h-5 block text-center">5</span>
                                    </td>
                                    <td>张三</td>
                                    <td>1234567890</td>
                                    <td>
                                        <span class="text-[#06943f] font-bold">482890</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>

        </div>

        <footer>
            <div class="w-[1200px] grid grid-cols-5 gap-4 px-12 py-16">
                <ul class="[&>li]:py-2">
                    <li class="text-xl font-bold">
                        关于我们
                    </li>
                    <li>
                        主办方：梧桐财经
                    </li>
                    <li>
                        首席赞助商
                    </li>
                    <li>
                        <img src="/images/logo.png">
                    </li>
                </ul>

                <ul class="[&>li]:py-2">
                    <li class="text-xl font-bold">
                        导师团队
                    </li>
                    <li>
                        邵悦华
                    </li>
                    <li>
                        章维军
                    </li>
                    <li>
                        张聚贤
                    </li>
                    <li>
                        崔荣
                    </li>
                </ul>

                <ul class=" [&>li]:py-2">
                    <li class=" text-xl font-bold">
                        加入我们
                    </li>
                    <li>
                        <a href="#">我要开户</a>
                    </li>
                    <li>
                        <a href="#">我要报名</a>
                    </li>
                </ul>

                <div>
                    <img src="/images/index/erweima.png" alt="">
                    <span>公众号二维码</span>
                </div>
                <div>
                    <img src="/images/index/erweima.png" alt="">
                    <span>公众号二维码</span>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>